<template>
	<div>
		<div>
			<!-- 教练详细信息弹窗 -->
			<el-dialog title="教练信息" :visible.sync="coachFormVisible">
				<el-form :model="coach" disabled="true">
					<el-form-item label="名字" :label-width="formLabelWidth">
						<el-input v-model="coach.name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="生日" :label-width="formLabelWidth">
						<el-col :span="11">
							<el-date-picker type="date" placeholder="选择日期" v-model="coach.birthday"
								style="width: 100%;">
							</el-date-picker>
						</el-col>
					</el-form-item>
					<el-form-item label="电话" :label-width="formLabelWidth">
						<el-input v-model="coach.phone" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="QQ号" :label-width="formLabelWidth">
						<el-input v-model="coach.qq" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="性别" :label-width="formLabelWidth">
						<el-radio-group v-model="coach.sex" :label-width="formLabelWidth">
							<el-radio :label = "1">男</el-radio>
							<el-radio :label = "2">女</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="级别" :label-width="formLabelWidth">
						<el-radio-group v-model="coach.level" :label-width="formLabelWidth">
							<el-radio :label="1">金牌教练</el-radio>
							<el-radio :label="2">银牌教练</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="粉丝数" :label-width="formLabelWidth">
						<el-input v-model="coach.fans" autocomplete="off"></el-input>
					</el-form-item>
					
				</el-form>
			</el-dialog>
			<!-- 课程详细信息弹窗 -->
			<el-dialog title="课程信息" :visible.sync="courseFormVisible">
				<el-form :model="course" disabled="true">
					<el-form-item label="名字" :label-width="formLabelWidth">
						<el-input v-model="course.courseName" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="场地" :label-width="formLabelWidth">
						<el-input v-model="course.place.name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="课程类别" :label-width="formLabelWidth">
						<el-radio-group v-model="course.courseType" :label-width="formLabelWidth">
							<el-radio :label="1">团课</el-radio>
							<el-radio :label="2">私教课</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="开始时间" :label-width="formLabelWidth">
						<el-col :span="11">
							<el-date-picker type="date" placeholder="选择日期" v-model="course.courseStartTime"
								style="width: 100%;"></el-date-picker>
						</el-col>
						<el-col class="line" :span="2">-</el-col>
						<el-col :span="11">
							<el-time-picker placeholder="选择时间" v-model="course.courseStartTime" style="width: 100%;">
							</el-time-picker>
						</el-col>
					</el-form-item>
					<el-form-item label="结束时间" :label-width="formLabelWidth">
						<el-col :span="11">
							<el-date-picker type="date" placeholder="选择日期" v-model="course.courseEndTime"
								style="width: 100%;"></el-date-picker>
						</el-col>
						<el-col class="line" :span="2">-</el-col>
						<el-col :span="11">
							<el-time-picker placeholder="选择时间" v-model="course.courseEndTime" style="width: 100%;">
							</el-time-picker>
						</el-col>
					</el-form-item>
					<el-form-item label="课程状态" :label-width="formLabelWidth">
						<el-radio-group v-model="course.courseStatus" :label-width="formLabelWidth">
							<el-radio :label="1">已完成</el-radio>
							<el-radio :label="2">未开始</el-radio>
							<el-radio :label="4">进行中</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="价格" :label-width="formLabelWidth">
						<el-input v-model="course.courseMoney" autocomplete="off"></el-input>
					</el-form-item>

					<el-form-item label="人数" :label-width="formLabelWidth">
						<el-input v-model="course.courseNum" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="课程描述" :label-width="formLabelWidth">
						<el-input v-model="course.courseDescription" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
			</el-dialog>
			<template>
				<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
					<el-tab-pane label="全部课程" name="first">
						<el-table :data="pageInfo.list" stripe style="width: 100%; line-height: 30px;">
							<el-table-column prop="courseName" label="课程名称">
							</el-table-column>
							<el-table-column prop="place.name" label="场馆">
							</el-table-column>
							<el-table-column prop="courseCoach.name" label="教练">
							</el-table-column>
							<el-table-column prop="courseStartTime" label="课程开始时间" width="180">
							</el-table-column>
							<el-table-column prop="courseEndTime" label="课程结束时间" width="180">
							</el-table-column>
							<el-table-column align="right" width="250">
								<template slot-scope="scope">
									<el-button size="mini" type="primary" @click="showCoach(scope.$index, scope.row)">
										教练信息</el-button>
									<el-button size="mini" type="danger" @click="showCourse(scope.$index, scope.row)">
										课程详情
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="block">
							<el-pagination @size-change="handleAllCampSizeChange" @current-change="handleAllCampCurrentChange"
								:current-page="currentPage" :page-sizes="[2, 5, 10]" :page-size="pageInfo.pageSize"
								layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
							</el-pagination>
						</div>
					</el-tab-pane>
					<el-tab-pane label="未开始" name="second">
						<div style="border: 1px solid gainsboro; ">
							<el-table :data="pageInfo.list" stripe style="width: 100%; line-height: 30px;">
								<el-table-column prop="courseName" label="课程名称">
								</el-table-column>
								<el-table-column prop="place.name" label="场馆">
								</el-table-column>
								<el-table-column prop="courseCoach.name" label="教练">
								</el-table-column>
								<el-table-column prop="courseStartTime" label="课程开始时间" width="180">
								</el-table-column>
								<el-table-column prop="courseEndTime" label="课程结束时间" width="180">
								</el-table-column>
								<el-table-column align="right" width="250">
									<template slot-scope="scope">
										<el-button size="mini" type="primary"
											@click="showCoach(scope.$index, scope.row)">教练信息</el-button>
										<el-button size="mini" type="danger"
											@click="showCourse(scope.$index, scope.row)">课程详情
										</el-button>
									</template>
								</el-table-column>
							</el-table>
							<div class="block">
								<el-pagination @size-change="handleCampSizeChange" @current-change="handleCampCurrentChange"
									:current-page="currentPage" :page-sizes="[2, 5, 10]" :page-size="pageInfo.pageSize"
									layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
								</el-pagination>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="正在进行" name="third">
						<el-table :data="pageInfo.list" stripe style="width: 100%; line-height: 30px;">
							<el-table-column prop="courseName" label="课程名称">
							</el-table-column>
							<el-table-column prop="place.name" label="场馆">
							</el-table-column>
							<el-table-column prop="courseCoach.name" label="教练">
							</el-table-column>
							<el-table-column prop="courseStartTime" label="课程开始时间" width="180">
							</el-table-column>
							<el-table-column prop="courseEndTime" label="课程结束时间" width="180">
							</el-table-column>
							<el-table-column align="right" width="250">
								<template slot-scope="scope">
									<el-button size="mini" type="primary" @click="showCoach(scope.$index, scope.row)">
										教练信息</el-button>
									<el-button size="mini" type="danger" @click="showCourse(scope.$index, scope.row)">
										课程详情
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="block">
							<el-pagination @size-change="handleCampSizeChange" @current-change="handleCampCurrentChange"
								:current-page="currentPage" :page-sizes="[2, 5, 10]" :page-size="pageInfo.pageSize"
								layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
							</el-pagination>
						</div>
					</el-tab-pane>
					<el-tab-pane label="已结束" name="fourth">
						<el-table :data="pageInfo.list" stripe style="width: 100%; line-height: 30px;">
							<el-table-column prop="courseName" label="课程名称">
							</el-table-column>
							<el-table-column prop="place.name" label="场馆">
							</el-table-column>
							<el-table-column prop="courseCoach.name" label="教练">
							</el-table-column>
							<el-table-column prop="courseStartTime" label="课程开始时间" width="180">
							</el-table-column>
							<el-table-column prop="courseEndTime" label="课程结束时间" width="180">
							</el-table-column>
							<el-table-column align="right" width="250">
								<template slot-scope="scope">
									<el-button size="mini" type="primary" @click="showCoach(scope.$index, scope.row)">
										教练信息</el-button>
									<el-button size="mini" type="danger" @click="showCourse(scope.$index, scope.row)">
										课程详情
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="block">
							<el-pagination @size-change="handleCampSizeChange" @current-change="handleCampCurrentChange"
								:current-page="currentPage" :page-sizes="[2, 5, 10]" :page-size="pageInfo.pageSize"
								layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
							</el-pagination>
						</div>
					</el-tab-pane>
				</el-tabs>
			</template>
		</div>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				courseList: [],
				activeName: 'first',
				pageInfo: '',
				currentPage: 1,
				pageSize: 2,
				status: '',
				coach: '',
				course: {
					courseName: "",
					place: "",
					courseType: "",
					courseStartTime: "",
					courseEndTime: "",
					courseStatus: "",
					courseDescription: "",
					courseMoney: "",
					courseNum: "",
				},
				coachFormVisible: false,
				formLabelWidth: '120px',
				courseFormVisible: false,
				
			}
		},
		created() {
			this.getList();
		},
		methods: {
			getList() {
				this.axios.get("http://localhost:8080/user/camp/" + 1 + "/" + this.currentPage + '/' + this.pageSize).then(
					res => {
						console.log(res.data.data);
						this.pageInfo = res.data.data
					})
			},
			handleClick(tab, event) {
				console.log(tab);
				if (tab.index == 0) {
					this.getList();
				} else if (tab.index == 1) {
					this.status = 2;
					this.getStatusList();
				} else if (tab.index == 2) {
					this.status = 4;
					this.getStatusList();
				} else {
					this.status = 1;
					this.getStatusList();
				}
			},
			handleAllCampSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.getList();
			},
			handleAllCampCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getList();
			},
			handleCampSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.getStatusList();
			},
			handleCampCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getStatusList();
			},
			getStatusList() {
				this.axios.get("http://localhost:8080/user/camp/" + 1 + "/" + this.status + "/" + this.currentPage + '/' + this
					.pageSize).then(res => {
					console.log(res.data.data);
					this.pageInfo = res.data.data
				})
			},
			//教练信息按钮的点击事件方法
			showCoach(index, row) {
				console.log(row.courseCoach);
				//点击之后，显示弹出框
				this.coachFormVisible = true;
				//点击编辑按钮之后，用户信息会显示在框中，方便修改
				this.coach = {
					...row.courseCoach
				};
			},
			//课程信息按钮的点击事件方法
			showCourse(index, row) {
				console.log(row);
				//点击之后，显示弹出框
				this.courseFormVisible = true;
				//点击编辑按钮之后，用户信息会显示在框中，方便修改
				this.course = {
					...row
				};
			},
		}
	}
</script>

<style>
</style>
